
$(document).ready(
  function(){
    
  }
)
// 给 登录按钮 添加点击事件
// 通过 JavaScript程序 跳转到 登录页 同时携带当前页面的url地址
$('[name="login"]').click(function () {
    // 跳转 登录页 同时携带当前页面的url地址栏信息
    window.location.href = `./login.html?url=${window.location.href}`;
})

// 给 退出登录按钮 添加点击事件
$('[name="logout"]').click(function () {
    // 获取 cookie 对象 
    // const cookieObj = myGetCookie();

    // // 判断 有没有登录信息
    // if( cookieObj.login === undefined ){
    //   // 如果调用结果 是 undefined 证明 没有登录信息 
    //   // 也就是还没有登录
    //   if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
    //     // 跳转登陆页面 同时携带 url地址栏数据
    //     window.location.href = `./login.html?url=${window.location.href}`;
    //   }      
    // }else {
    //   // 如果调用结果 不是 undefined 证明 有登录信息
    //   // 也就是 已经登录了
    //   // 删除 cookie 设定 cookie 时效为 负数
    //   mySetCookie( 'login' , 1 , -1 , '/' );  
    //   // 弹出提示信息
    //   window.alert('您已经退出登录');      
    // }


    // 使用 localStorage 

    if (window.localStorage.login === undefined) {
        // 没有登录 
        if (window.confirm('您还没有登录,点击确定跳转登录页')) {
            window.location.href = `./login.html?url=${window.location.href}`;
        }
    } else {
        // 已经登录 删除登录数据
        window.localStorage.removeItem('login');
        // 弹出提示信息
        window.alert('您已经退出登录');
    }

})

// 给 购物车按钮 添加点击事件
$('[name="cart"]').click(function () {
    // 获取 登录数据信息

    // cookie方法
    // const cookieObj = myGetCookie();
    // if( cookieObj.login === undefined ){
    //   // 没有登录
    //   if(window.confirm('您还没有登录,点击确定跳转登录页')){
    //     window.location.href = `./login.html?url=${window.location.href}`;
    //   }

    // }else{
    //   // 已经登录 跳转购物车
    //   window.location.href = './cart.html';
    // }

    // localStorage方法判断
    if (window.localStorage.login === undefined) {
        // 没有登录
        if (window.confirm('您还没有登录,点击确定跳转登录页')) {
            window.location.href = `./login.html?url=${window.location.href}`;
        }
    } else {
        // 已经登录
        window.location.href = './cart.html';
    }

})

// 动态生成 分类列表 

// 定义一个数组 模拟数据库 返回的 分类名称信息
const arr = ['食品酒水', '童装玩具', '家装建材', '奶粉尿裤', '手机相机'];


// 向 ul标签中 写入 li标签
let str = '';
let bool = true ;
arr.forEach(function (item) {
    str += `<li><a class="btn  btn-primary btn-lg " href="./category.html?cat_one_id=${item}" role="button" >${item}</a></li>`;
})
$('[name="list"]').html(str);

// 显示页数 默认是第1页
var page ;
  page = 1 ;
// 每页显示数据数量 默认是 4 条
let line = 8;

// 调用函数 动态渲染生成页面
setPage();

// 调用函数 根据 url地址栏 cat_one_id 发送请求 动态渲染生成页面
async function setPage() {
    // 获取当前浏览器地址栏参数数据


    // 向 PHP程序 发送请求 获取结果
    const res = await myPromiseJQueryAjax('./server/goods_list.php', 'get', { cat_one_id:'', page: page, line: line, }, 'json');
    console.log(res);

    // 动态生成页面内容
    let str1 = '';
    
    res.data.forEach(item => {
    str1 +=`
    <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="card text-center card-product">
              <div class="card-product__img">
                <img class="card-img" src="${item.goods_big_logo}" alt="">
                <ul class="card-product__imgOverlay">
                  <!-- 遮罩层 -->
                  <li><button><a class=" btn btn-danger" href="./single-product.html?goods_id=${item.goods_id} " role="button">查看商品详情</a></button></li>
                </ul>
              </div>
              <div class="card-body">
                <p>${item.cat_id}</p>
                <h4 class="card-product__title"><a href="single-product.html">${item.goods_name}</a></h4>
                <p class="card-product__price">${item.goods_price}钱</p>
              </div>
            </div>
          </div>
    `
    
    })

    // 创建ul标签节点
    // const oUl = $('<ul></ul>');

    // 写入ul标签中li标签字符串
    // oUl.html(str);

    // 清空ul的父级标签
    $('.zhanshi').html(str1);

    // 写入ul标签节点
    // $('.container').append(oUl);

    // 设定 分页显示插件的配置参数
    $('[name="p"]').pagination({
        pageCount: res.sumPage,         //  当前数据对应的总页数
        totalData: res.row,             //  总数据数量
        current: res.page,             //  当前页数
        showData: res.line,             //  当前每页数据数量
        prevContent: '上一页',          //  上一页节点内容
        nextContent: '下一页',          //  下一页节点内容
        prevCls: 'prev',                 //  上一页的class
        nextCls: 'next',                 //  下一页的class
        activeCls: 'active',             //  选中状态类名
        mode: 'fixed',                 //  固定分页按钮数量
        count: 4,                      //  除了选中按钮之外 其他分页按钮的个数 也就是设定4 一共5个按钮
        coping: true,                   //  是否开启首页末页
        homePage: '首页',               //  首页内容
        endPage: '末页',                //  末页内容
        isHide: true,                  //  总页数为 0 / 1 隐藏分页插件 
        keepShowPN: true,              //  是否一直显示 上一页 下一页
        jump: true,                     //  跳转指定页数
        callback: function (result) {     //  分页插件的回调函数 点击分页插件按钮时执行
            // // 回调函数的形参中 存储的分页插件对象
            // console.log(result);
            // // 其中 result.getCurrent() 获取 点击分页插件按钮 对应的页数
            // console.log( result.getCurrent() );

            // 根据 result.getCurrent() 获取的页数 再次发起请求 获取数据库数据 动态渲染生成新的页面内容
            page = result.getCurrent();

            // 再次调用函数动态渲染生成页面
            setPage();
        }
    });
}


